<template>
    <div class="ls-goods">
        <el-form inline :model="formInline" class="uiwu-form-inline">
            <el-form-item label="创建时间">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    v-model="formInline.creationTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changePicker"
                />
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="formInline.s_keyword"
                    placeholder="请输入订单编号/用户昵称/手机号码搜索"
                    clearable
                    style="width: 400px"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
                <el-button @click="exportOrder">导出</el-button>
            </el-form-item>
        </el-form>
        <el-radio-group v-model="radioType" @change="changeRadio">
            <el-radio-button label="" value="">全部({{ extend.all_count }})</el-radio-button>
            <el-radio-button label="0" value="0">待付款({{ extend.pay_count }})</el-radio-button>
            <el-radio-button label="1" value="1">待发货({{ extend.delivery_count }})</el-radio-button>
            <el-radio-button label="2" value="2">待收货({{ extend.receive_count }})</el-radio-button>
            <el-radio-button label="3" value="3">已完成({{ extend.finish_count }})</el-radio-button>
            <el-radio-button label="4" value="4">已取消({{ extend.close_count }})</el-radio-button>
        </el-radio-group>
        <el-table v-loading="showLoading" :data="tableData" style="width: 100%">
            <el-table-column prop="sn" label="订单编号" align="center" />
            <el-table-column prop="avatar" label="用户头像" align="center">
                <template #default="{ row }">
                    <el-image
                        :src="row.avatar"
                        style="width: 70px; height: 70px"
                        :preview-src-list="[row.avatar]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="store_name" label="昵称" align="center" />
            <el-table-column prop="store_mobile" label="手机号码" align="center" />
            <el-table-column prop="type_num" label="商品品类总数" align="center" />
            <el-table-column prop="total_num" label="商品总数量" align="center" />
            <el-table-column prop="order_amount" label="订单总金额" align="center" />
            <el-table-column prop="order_status_desc" label="订单状态" align="center" />
            <el-table-column prop="create_time" label="创建时间" align="center" />
            <el-table-column width="190" label="操作" align="center">
                <template #default="{ row }">
                    <el-button type="text" @click="openWindow(row)">详情</el-button>
                    <el-button type="text" v-if="row.s_btn.price_btn" @click="editPrice(row)">改价</el-button>
                    <el-button type="text" v-if="row.s_btn.deliver_btn" @click="delivery(row)">发货</el-button>
                    <el-button type="text" v-if="row.s_btn.confirm_btn" @click="receiving(row)">收货</el-button>
                    <el-button type="text" v-if="row.s_btn.cancel_btn" @click="cloneOrder(row)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="uiwu-pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                hide-on-single-page
                :total="totals"
                :current-page="currentPage4"
                :page-size="10"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
            />
        </div>
        <!-- 改价弹窗对话框 -->
        <el-dialog :visible.sync="dialogVisible" draggable title="改价" width="600px" @close="change_price = ''">
            <el-form>
                <el-form-item label="订单金额">
                    <el-input
                        type="number"
                        v-model="change_price"
                        :min="0"
                        :controls="false"
                        placeholder="请输入订单金额"
                        style="width: 100%"
                    />
                </el-form-item>
                <el-form-item label-width="70">
                    <span>当前订单金额为：￥{{ orderItem?.order_amount }}</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmPrice"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
    apiOrderLists,
    apiOrderChangePrice,
    apiOrderCancel,
    apiOrderDelivery,
    apiOrderConfirm
} from '@/api/order/order'
@Component({
    components: {}
})
export default class Order extends Vue {
    radioType: any = ''
    showLoading = false
    tableData: any[] = []
    totals = 0
    formInline: any = {
        creationTime: null,
        s_keyword: '',
        start_time: null,
        end_time: null
    }
    dialogVisible = false
    currentPage4 = 1
    orderItem: any = null
    change_price: any = ''
    extend: any = {}
    /**
     * openWindow 查看详情
     * @param row 订单数据
     */
    openWindow(row: any) {
        this.$router.push({
            name: 'order_detail',
            query: {
                id: row.id
            }
        })
    }
    /**
     * editPrice 触发改价弹窗显示
     * @param row 订单数据
     */
    editPrice(row: any) {
        this.dialogVisible = true
        this.orderItem = row
    }
    /**
     * delivery 确认发货操作
     * @param row 订单数据信息
     */
    async delivery(row: any) {
        await this.uiElMessageBox('是否确认对该订单发货？')
        await apiOrderDelivery({ id: row.id })
        this.getApiOrderLists()
    }
    /**
     * receiving 确认发货操作
     * @param row 订单数据信息
     */
    async receiving(row: any) {
        await this.uiElMessageBox('是否确认对该订单收货？')
        await apiOrderConfirm({ id: row.id })
        this.getApiOrderLists()
    }
    /**
     * cloneOrder 取消订单发货操作
     * @param row 订单数据信息
     */
    async cloneOrder(row: any) {
        await this.uiElMessageBox('是否确认取消该订单？')
        await apiOrderCancel({ id: row.id })
        this.getApiOrderLists()
    }
    /**
     * 确定改价
     */
    async confirmPrice() {
        if (!this.change_price) {
            return this.$message.error('价格不能为空或者为0')
        }
        await apiOrderChangePrice({
            change_price: this.change_price,
            id: this.orderItem.id
        })
        this.dialogVisible = false
        this.getApiOrderLists()
    }
    /**
     * uiElMessageBox 弹窗统一封装
     * @param content 弹窗提示的内容
     */
    uiElMessageBox(content: string) {
        return new Promise<void>((resolve, reject) => {
            this.$confirm(content, '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    resolve()
                })
                .catch(() => {
                    reject()
                })
        })
    }
    /**
     * handleSizeChange 分页页数切换
     * @param e 选择的页数
     */
    handleSizeChange(e: any) {
        this.currentPage4 = e
        this.getApiOrderLists()
    }
    /**
     * changeRadio 订单状态筛选
     */
    changeRadio() {
        this.currentPage4 = 1
        this.getApiOrderLists()
    }
    /**
     * changePicker时间选择回调
     * @param e 回调选中的时间内容
     */
    changePicker(e: any) {
        this.formInline.start_time = null
        this.formInline.end_time = null
        if (e) {
            this.formInline.start_time = e[0]
            this.formInline.end_time = e[1]
        }
    }
    /**
     * searchQuery 筛选
     */
    searchQuery() {
        this.currentPage4 = 1
        this.getApiOrderLists()
    }
    /**
     * resetQuery 重置筛选条件
     */
    resetQuery() {
        this.currentPage4 = 1
        this.formInline = {
            creationTime: null,
            s_keyword: '',
            start_time: null,
            end_time: null
        }
        this.getApiOrderLists()
    }
    /**
     * getApiOrderLists 获取订单列表
     */
    async getApiOrderLists() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        const { count, lists, extend } = await apiOrderLists({
            order_status: this.radioType,
            page_size: 10,
            page_no: this.currentPage4,
            ...postData
        })
        this.tableData = lists
        this.totals = count
        this.extend = extend
    }
    /**
     * exportOrder 订单导出
     */
    async exportOrder() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        await apiOrderLists({
            order_status: this.radioType,
            export: 2,
            ...postData
        })
    }
    created() {
        this.getApiOrderLists()
    }
    activated() {
        if (this.$route.query.type) {
            this.radioType = ''
            this.getApiOrderLists()
        }
    }
}
</script>

<style lang="scss" scoped>
.uiwu-form-inline {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px;
    padding-bottom: 0;
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
::v-deep .el-date-editor .el-range-separator {
    width: 6%;
}
.uiwu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 16px 0;
}
</style>
